{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .table thead th {
        vertical-align: middle;
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .go-page-input {
        width: 65px;
        text-align: center;
    }

    /* STANDARD PETROGL PAGINATION */
    .pagination .page-link {
        color: #495057 !important;
        border-color: #6c757d !important;
        background-color: #ffffff !important;
    }

    .pagination .page-link:hover,
    .pagination .page-link:focus {
        color: #343a40 !important;
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        box-shadow: none !important;
    }

    .pagination .page-item.active .page-link {
        color: #ffffff !important;
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d !important;
        background-color: #ffffff !important;
        border-color: #6c757d !important;
    }

</style>


<!-- =========================================================
     HEADER
     ========================================================= -->

<div class="d-flex justify-content-between align-items-center"
    style="padding: 1rem;">

    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">
        Chart of Account
    </h2>

    <input
        type="text"
        id="searchInput"
        class="form-control"
        placeholder="Search account no..."
        value="{{ search_query|default:'' }}"
        style="max-width: 300px; margin-right: 1rem;"
    >

    <div>

        <button
            type="button"
            class="btn btn-secondary"
            data-bs-toggle="modal"
            data-bs-target="#accountModal"
            onclick="resetForm()">

            Add COA

        </button>


        <button
            type="button"
            class="btn btn-secondary"
            onclick="generateAccountPDF()">

            Gen. PDF

        </button>


        <a
            href="{% url 'export_to_excel_account' %}"
            class="btn btn-secondary">

            Export to Excel

        </a>


        <form
            method="POST"
            action="{% url 'upload_excel_account' %}"
            enctype="multipart/form-data"
            style="display:inline;">

            {% csrf_token %}

            <input
                type="file"
                name="excel_file"
                id="excel_file"
                accept=".xlsx,.xls"
                style="display:none"
                onchange="this.form.submit();"
            >

            <button
                type="button"
                class="btn btn-secondary"
                onclick="document.getElementById('excel_file').click();">

                Upload COA

            </button>

        </form>

    </div>

</div>


<!-- =========================================================
     PAGINATION TOP
     ========================================================= -->

{% if page_obj.paginator.num_pages > 1 %}

<div class="d-flex justify-content-between align-items-center mt-2 mb-2"
    style="padding: 0 1rem;">

    <div>

        <small class="text-muted">

            Showing
            {{ page_obj.start_index }}
            -
            {{ page_obj.end_index }}
            of
            {{ page_obj.paginator.count }}

        </small>

    </div>


    <div class="d-flex align-items-center gap-2">

        <nav aria-label="Account pagination">

            <ul class="pagination mb-0">

                {% if page_obj.has_previous %}

                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        First

                    </a>

                </li>


                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Previous

                    </a>

                </li>

                {% else %}

                <li class="page-item disabled">

                    <span class="page-link">
                        First
                    </span>

                </li>


                <li class="page-item disabled">

                    <span class="page-link">
                        Previous
                    </span>

                </li>

                {% endif %}


                <li class="page-item active">

                    <span class="page-link">

                        {{ page_obj.number }}
                        /
                        {{ page_obj.paginator.num_pages }}

                    </span>

                </li>


                {% if page_obj.has_next %}

                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Next

                    </a>

                </li>


                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Last

                    </a>

                </li>

                {% else %}

                <li class="page-item disabled">

                    <span class="page-link">
                        Next
                    </span>

                </li>


                <li class="page-item disabled">

                    <span class="page-link">
                        Last
                    </span>

                </li>

                {% endif %}

            </ul>

        </nav>


        <!-- GO TO PAGE -->

        <form
            method="GET"
            class="d-flex align-items-center gap-1">

            {% if search_query %}

            <input
                type="hidden"
                name="search"
                value="{{ search_query }}">

            {% endif %}


            <span class="text-muted small">
                Go to Page
            </span>


            <input
                type="number"
                name="page"
                class="form-control form-control-sm go-page-input"
                min="1"
                max="{{ page_obj.paginator.num_pages }}"
                placeholder="Page"
                required>


            <button
                type="submit"
                class="btn btn-sm btn-secondary">

                Go

            </button>

        </form>

    </div>

</div>

{% endif %}


<!-- =========================================================
     TABLE
     ========================================================= -->

<div class="table-container with-bottom-padding">

    <table
        class="table table-striped table-hover"
        id="accountTable">

        <thead class="table-dark">

            <tr>

                <th scope="col">No</th>
                <th scope="col">Account No</th>
                <th scope="col">Account Name</th>
                <th scope="col">Type</th>
                <th scope="col">Closed</th>
                <th scope="col">Bank</th>
                <th scope="col">Currency</th>
                <th scope="col">Capital</th>
                <th scope="col">FQR</th>
                <th scope="col">FQR Report#</th>
                <th scope="col">FQR Line#</th>
                <th scope="col">Attch. Report#</th>
                <th scope="col">Attach. Line#</th>
                <th scope="col">Attach. Column#</th>
                <th scope="col">Actions</th>

            </tr>

        </thead>


        <tbody>

            {% for acc in account %}

            <tr
                data-id="{{ acc.id }}"
                data-acct_no="{{ acc.acct_no }}"
                data-acct_name="{{ acc.acct_name }}"
                data-acct_type="{{ acc.acct_type }}"
                data-closed="{{ acc.closed }}"
                data-bank="{{ acc.bank }}"
                data-currsign="{{ acc.currsign }}"
                data-capital="{{ acc.capital }}"
                data-fqr="{{ acc.pqr }}"
                data-reportno="{{ acc.reportno }}"
                data-lineno="{{ acc.lineno }}"
                data-attchno="{{ acc.attchno }}"
                data-attchline="{{ acc.attchline }}"
                data-attchcol="{{ acc.attchcol }}"
            >

                <td>
                    {{ page_obj.start_index|add:forloop.counter0 }}
                </td>

                <td>
                    {{ acc.acct_no|format_acct_no }}
                </td>

                <td>
                    {{ acc.acct_name }}
                </td>

                <td>
                    {{ acc.acct_type }}
                </td>

                <td>
                    {% if acc.closed %}
                        Yes
                    {% else %}
                        No
                    {% endif %}
                </td>

                <td>
                    {% if acc.bank %}
                        Yes
                    {% else %}
                        No
                    {% endif %}
                </td>

                <td>
                    {{ acc.currsign }}
                </td>

                <td>
                    {% if acc.capital %}
                        Yes
                    {% else %}
                        No
                    {% endif %}
                </td>

                <td>
                    {% if acc.pqr %}
                        Yes
                    {% else %}
                        No
                    {% endif %}
                </td>

                <td>
                    {{ acc.reportno }}
                </td>

                <td>
                    {{ acc.lineno }}
                </td>

                <td>
                    {{ acc.attchno }}
                </td>

                <td>
                    {{ acc.attchline }}
                </td>

                <td>
                    {{ acc.attchcol }}
                </td>


                <td>

                    <div class="d-flex justify-content-center gap-1">

                        <button
                            type="button"
                            class="btn btn-sm btn-secondary"
                            onclick="editAccount('{{ acc.id }}')">

                            <i class="bi bi-pencil-square"></i>

                        </button>


                        <form
                            method="POST"
                            action="{% url 'delete_account' acc.id %}"
                            class="m-0">

                            {% csrf_token %}

                            <button
                                type="submit"
                                class="btn btn-sm btn-danger"
                                onclick="return confirm('Are you sure you want to delete this Account?')">

                                <i class="bi bi-trash"></i>

                            </button>

                        </form>

                    </div>

                </td>

            </tr>

            {% empty %}

            <tr>

                <td colspan="15" class="text-center">
                    No data
                </td>

            </tr>

            {% endfor %}

        </tbody>

    </table>

</div>


<!-- =========================================================
     PAGINATION BOTTOM
     ========================================================= -->

{% if page_obj.paginator.num_pages > 1 %}

<div class="d-flex justify-content-between align-items-center mt-2 mb-3"
    style="padding: 0 1rem;">

    <div>

        <small class="text-muted">

            Showing
            {{ page_obj.start_index }}
            -
            {{ page_obj.end_index }}
            of
            {{ page_obj.paginator.count }}

        </small>

    </div>


    <div class="d-flex align-items-center gap-2">

        <nav aria-label="Account pagination">

            <ul class="pagination mb-0">

                {% if page_obj.has_previous %}

                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page=1{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        First

                    </a>

                </li>


                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Previous

                    </a>

                </li>

                {% else %}

                <li class="page-item disabled">

                    <span class="page-link">
                        First
                    </span>

                </li>


                <li class="page-item disabled">

                    <span class="page-link">
                        Previous
                    </span>

                </li>

                {% endif %}


                <li class="page-item active">

                    <span class="page-link">

                        {{ page_obj.number }}
                        /
                        {{ page_obj.paginator.num_pages }}

                    </span>

                </li>


                {% if page_obj.has_next %}

                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Next

                    </a>

                </li>


                <li class="page-item">

                    <a
                        class="page-link"
                        href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query|urlencode }}{% endif %}">

                        Last

                    </a>

                </li>

                {% else %}

                <li class="page-item disabled">

                    <span class="page-link">
                        Next
                    </span>

                </li>


                <li class="page-item disabled">

                    <span class="page-link">
                        Last
                    </span>

                </li>

                {% endif %}

            </ul>

        </nav>


        <!-- GO TO PAGE -->

        <form
            method="GET"
            class="d-flex align-items-center gap-1">

            {% if search_query %}

            <input
                type="hidden"
                name="search"
                value="{{ search_query }}">

            {% endif %}


            <span class="text-muted small">
                Go to Page
            </span>


            <input
                type="number"
                name="page"
                class="form-control form-control-sm go-page-input"
                min="1"
                max="{{ page_obj.paginator.num_pages }}"
                placeholder="Page"
                required>


            <button
                type="submit"
                class="btn btn-sm btn-secondary">

                Go

            </button>

        </form>

    </div>

</div>

{% endif %}


<!-- =========================================================
     JAVASCRIPT
     ========================================================= -->

<script>


// ============================================================
// SEARCH
// ============================================================

function performAccountSearch() {

    const searchInput =
        document.getElementById('searchInput');

    const search =
        searchInput.value.trim();


    if (search === '') {

        window.location.href =
            "{% url 'account' %}";

    } else {

        window.location.href =
            "{% url 'account' %}?search="
            + encodeURIComponent(search);

    }

}


document
    .getElementById('searchInput')
    .addEventListener(
        'keydown',
        function(event) {

            if (event.key === 'Enter') {

                event.preventDefault();

                performAccountSearch();

            }

        }
    );


// ============================================================
// GENERATE PDF
// ============================================================

function generateAccountPDF() {

    const searchInput =
        document.getElementById('searchInput');

    const search =
        searchInput.value.trim();


    if (search !== '') {

        const url =
            "{% url 'generate_pdf_account' %}"
            + "?search="
            + encodeURIComponent(search);


        window.open(
            url,
            '_blank'
        );


        return;

    }


    const modal =
        new bootstrap.Modal(
            document.getElementById(
                'printAccountModal'
            )
        );


    modal.show();

}


// ============================================================
// CURRENT PAGE PDF
// ============================================================

function printCurrentAccountPage() {

    const url =
        "{% url 'generate_pdf_account' %}"
        + "?scope=current"
        + "&page={{ page_obj.number }}";


    window.open(
        url,
        '_blank'
    );


    const modalElement =
        document.getElementById(
            'printAccountModal'
        );


    const modal =
        bootstrap.Modal.getInstance(
            modalElement
        );


    if (modal) {

        modal.hide();

    }

}


// ============================================================
// ALL ACCOUNT PDF
// ============================================================

function printAllAccounts() {

    const url =
        "{% url 'generate_pdf_account' %}"
        + "?scope=all";


    window.open(
        url,
        '_blank'
    );


    const modalElement =
        document.getElementById(
            'printAccountModal'
        );


    const modal =
        bootstrap.Modal.getInstance(
            modalElement
        );


    if (modal) {

        modal.hide();

    }

}


// ============================================================
// EDIT ACCOUNT
// ============================================================

function editAccount(acctId) {

    document.getElementById(
        'accountModalLabel'
    ).innerText =
        'Edit Account No';


    document.getElementById(
        'accountForm'
    ).action =
        "{% url 'edit_account' 0 %}"
        .replace(
            '0',
            acctId
        );


    const row =
        document.querySelector(
            `tr[data-id="${acctId}"]`
        );


    if (row) {

        document.getElementById(
            'acct_no'
        ).value =
            row.dataset.acct_no;


        document.getElementById(
            'acct_no'
        ).readOnly = true;


        document.getElementById(
            'acct_name'
        ).value =
            row.dataset.acct_name;


        document.getElementById(
            'acct_type'
        ).value =
            row.dataset.acct_type;


        document.getElementById(
            'closed'
        ).checked =
            row.dataset.closed === "True";


        document.getElementById(
            'bank'
        ).checked =
            row.dataset.bank === "True";


        document.getElementById(
            'currsign'
        ).value =
            row.dataset.currsign;


        toggleCurrency();


        document.getElementById(
            'capital'
        ).checked =
            row.dataset.capital === "True";


        document.getElementById(
            'pqr'
        ).checked =
            row.dataset.pqr === "True";


        document.getElementById(
            'reportno'
        ).value =
            row.dataset.reportno;


        document.getElementById(
            'lineno'
        ).value =
            row.dataset.lineno;


        document.getElementById(
            'attchno'
        ).value =
            row.dataset.attchno;


        document.getElementById(
            'attchline'
        ).value =
            row.dataset.attchline;


        document.getElementById(
            'attchcol'
        ).value =
            row.dataset.attchcol;

    }


    const acctModal =
        new bootstrap.Modal(
            document.getElementById(
                'accountModal'
            )
        );


    acctModal.show();

}


// ============================================================
// RESET FORM
// ============================================================

function resetForm() {

    document.getElementById(
        'accountModalLabel'
    ).innerText =
        'Add Account No';


    document.getElementById(
        'accountForm'
    ).action =
        "{% url 'save_account' %}";


    document.getElementById(
        'accountForm'
    ).reset();


    document.getElementById(
        'acct_no'
    ).readOnly = false;


    document.getElementById(
        'closed'
    ).checked = false;


    document.getElementById(
        'bank'
    ).checked = false;


    document.getElementById(
        'capital'
    ).checked = false;


    document.getElementById(
        'pqr'
    ).checked = false;


    toggleCurrency();

}


// ============================================================
// TOGGLE CURRENCY
// ============================================================

function toggleCurrency() {

    const bank =
        document.getElementById(
            "bank"
        );

    const curr =
        document.getElementById(
            "currsign"
        );


    if (bank.checked) {

        curr.disabled = false;

    } else {

        curr.disabled = true;

        curr.value = "";

    }

}


// ============================================================
// INITIALIZE
// ============================================================

document.addEventListener(
    "DOMContentLoaded",
    function() {

        toggleCurrency();

    }
);

</script>


<!-- =========================================================
     PRINT ACCOUNT MODAL
     ========================================================= -->

<div
    class="modal fade"
    id="printAccountModal"
    tabindex="-1"
    aria-labelledby="printAccountModalLabel"
    aria-hidden="true">

    <div
        class="modal-dialog modal-dialog-centered">

        <div class="modal-content">


            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="printAccountModalLabel">

                    Print Account

                </h5>


                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body text-center">

                <p class="mb-4">

                    No search filter is active.
                    What would you like to print?

                </p>


                <div class="d-flex justify-content-center gap-2">

                    <button
                        type="button"
                        class="btn btn-secondary"
                        onclick="printCurrentAccountPage()">

                        Current Page

                    </button>


                    <button
                        type="button"
                        class="btn btn-secondary"
                        onclick="printAllAccounts()">

                        All Pages

                    </button>

                </div>

            </div>


            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal">

                    Cancel

                </button>

            </div>

        </div>

    </div>

</div>


<!-- =========================================================
     ACCOUNT MODAL
     ========================================================= -->

<div
    class="modal fade"
    id="accountModal"
    tabindex="-1"
    aria-labelledby="accountModalLabel"
    aria-hidden="true">

    <div
        class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content">


            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="accountModalLabel">

                    Add Account No

                </h5>


                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body">


                <form
                    id="accountForm"
                    method="POST"
                    action="{% url 'save_account' %}">

                    {% csrf_token %}


                    <div class="container-fluid">


                        <!-- ================= GENERAL ================= -->

                        <div class="card mb-3">

                            <div class="card-header fw-bold">

                                General Information

                            </div>


                            <div class="card-body">


                                <div class="row">


                                    <div class="col-md-6 mb-3">

                                        <label class="form-label">
                                            Account No
                                        </label>


                                        <input
                                            type="text"
                                            class="form-control"
                                            id="acct_no"
                                            name="acct_no"
                                            required>

                                    </div>


                                    <div class="col-md-6 mb-3">

                                        <label class="form-label">
                                            Type
                                        </label>


                                        <select
                                            class="form-select"
                                            id="acct_type"
                                            name="acct_type"
                                            required>

                                            <option value="">
                                                -- Select Type --
                                            </option>

                                            <option value="ASS">
                                                ASS - Asset
                                            </option>

                                            <option value="LNQ">
                                                LNQ - Liability & Equity
                                            </option>

                                            <option value="REV">
                                                REV - Revenue
                                            </option>

                                            <option value="EXP">
                                                EXP - Expense
                                            </option>

                                        </select>

                                    </div>

                                </div>


                                <div class="mb-3">

                                    <label class="form-label">
                                        Account Name
                                    </label>


                                    <input
                                        class="form-control"
                                        id="acct_name"
                                        name="acct_name"
                                        required>

                                </div>

                            </div>

                        </div>


                        <!-- ================= PROPERTIES ================= -->

                        <div class="row">


                            <div class="col-md-4">

                                <div class="card">

                                    <div class="card-header fw-bold">

                                        Properties

                                    </div>


                                    <div class="card-body">


                                        <div class="form-check mb-2">

                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                id="closed"
                                                name="closed">


                                            <label class="form-check-label">
                                                Closed
                                            </label>

                                        </div>


                                        <div class="form-check mb-3">

                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                id="bank"
                                                name="bank"
                                                onchange="toggleCurrency()">


                                            <label class="form-check-label">
                                                Bank
                                            </label>

                                        </div>


                                        <div class="mb-3">

                                            <label class="form-label">
                                                Currency
                                            </label>


                                            <select
                                                class="form-select"
                                                id="currsign"
                                                name="currsign">

                                                <option value="">
                                                    -- Select Currency --
                                                </option>


                                                {% for curr in currencies %}

                                                <option
                                                    value="{{ curr.currsign }}">

                                                    {{ curr.currsign }}
                                                    -
                                                    {{ curr.currname }}

                                                </option>

                                                {% endfor %}

                                            </select>

                                        </div>


                                        <div class="form-check mb-2">

                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                id="capital"
                                                name="capital">


                                            <label class="form-check-label">
                                                Capital
                                            </label>

                                        </div>


                                        <div class="form-check">

                                            <input
                                                class="form-check-input"
                                                type="checkbox"
                                                id="pqr"
                                                name="pqr">


                                            <label class="form-check-label">
                                                FQR
                                            </label>

                                        </div>

                                    </div>

                                </div>

                            </div>


                            <!-- ================= REPORT MAPPING ================= -->

                            <div class="col-md-8">

                                <div class="card">


                                    <div class="card-header fw-bold">

                                        Report Mapping

                                    </div>


                                    <div class="card-body">


                                        <div class="row mb-2">


                                            <div class="col-md-6 mb-3">

                                                <label class="form-label">
                                                    FQR Report
                                                </label>


                                                <select
                                                    class="form-select"
                                                    id="reportno"
                                                    name="reportno"
                                                    required>

                                                    <option value="">
                                                        -- Select No --
                                                    </option>

                                                    <option value="3">
                                                        3
                                                    </option>

                                                    <option value="4">
                                                        4
                                                    </option>

                                                    <option value="8">
                                                        8
                                                    </option>

                                                    <option value="11">
                                                        11
                                                    </option>

                                                </select>

                                            </div>


                                            <div class="col-md-6">

                                                <label>
                                                    FQR Line
                                                </label>


                                                <input
                                                    class="form-control"
                                                    id="lineno"
                                                    name="lineno">

                                            </div>

                                        </div>


                                        <hr>

                                        <hr>


                                        <div class="row">


                                            <div class="col-md-5 mb-3">

                                                <label class="form-label">
                                                    Attachment Report
                                                </label>


                                                <select
                                                    class="form-select"
                                                    id="attchno"
                                                    name="attchno">

                                                    <option value="">
                                                        -- Select No --
                                                    </option>

                                                    <option value="4">
                                                        4
                                                    </option>

                                                    <option value="8">
                                                        8
                                                    </option>

                                                    <option value="11">
                                                        11
                                                    </option>

                                                </select>

                                            </div>


                                            <div class="col-md-3 mb-3">

                                                <label class="form-label">
                                                    Attach Line
                                                </label>


                                                <input
                                                    class="form-control"
                                                    id="attchline"
                                                    name="attchline">

                                            </div>


                                            <div class="col-md-4 mb-3">

                                                <label class="form-label">
                                                    Column
                                                </label>


                                                <input
                                                    class="form-control"
                                                    id="attchcol"
                                                    name="attchcol">

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>


                    <div class="modal-footer">

                        <button
                            class="btn btn-secondary"
                            data-bs-dismiss="modal"
                            type="button">

                            Cancel

                        </button>


                        <button
                            class="btn btn-primary"
                            type="submit">

                            Save

                        </button>

                    </div>


                </form>

            </div>

        </div>

    </div>

</div>


{% endblock %}